<template>
  <div class="my-collect">
    <h2 class="title">我的收藏</h2>
    <div class="collect-list">
      <div class="collect-item"  v-for="(item,key) in productlist" :key="`orderItem-${key}`">
        <img class="car-img" :src="(item.productPic)|nopic" alt="" />
        <h4 class="car-name">{{item.productName}}</h4>
        <!-- <p class="car-des">简约有型 性价首选</p> -->
        <p class="car-price">定向金 ￥<span class="price">{{item.productPrice}}</span></p>
        <div class="btn-box">
          <!--<el-popconfirm-->
                  <!--confirm-button-text='好的'-->
                  <!--cancel-button-text='不用了'-->
                  <!--icon="el-icon-info"-->
                  <!--icon-color="red"-->
                  <!--title="确认删除？"-->
                  <!--@confirm="delProduct(item.productId)"-->
          <!--&gt;-->
           <!---->
          <!--</el-popconfirm>-->
          <el-button slot="reference" size="small " @click="delProduct(item.productId)">删除</el-button>
          <!--<el-button size="small" @click="delProduct">删除</el-button>-->
          <el-button size="small" type="danger" @click="toBuy(item)">立即订购</el-button>
        </div>
      </div>
    </div>

    <el-pagination
            background
            layout="prev, pager, next"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            @prev-click = "prePage"
            @next-click = "nextPage"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="persizes"
            :total = "total"
    ></el-pagination>
  </div>
</template>

<script>

import empty from "../../../utils/common";
export default {
  name: "MyCollect",
  components: {},
  data() {
    return {
        productlist:[],
        currentPage:1,
        total:1,
        persizes:10,
        memberId:'',
    };
  },
  created() {
      this.list();
  },
  methods: {
      list(){
          let _this = this;
          //用户信息
          let userinfo =  JSON.parse(localStorage.getItem('userinfo'));
          let id = '';
          if(!empty(userinfo.id)){
              id = userinfo.id;
              _this.memberId = id;
          }
          _this.$http.get('/member/collection/listProduct/'+id,{
               page:_this.currentPage,
               size:_this.persizes,
               memberId:id
          }).then(function (response) {
              _this.productlist = response.data;
              _this.total = response.data.length;
              // _this.$message({
              //     message:response.message,
              //     type: 'success'
              // });
          })
      },
      handleSizeChange(val) {
          this.persizes = val;
          this.list();
      },
      handleCurrentChange(val) {
          this.currentPage = val;
          this.list();
      },
      prePage(){
          this.list();
      },
      nextPage(){
          this.list();
      },
      //删除收藏
      delProduct(productId){
          let _this = this;
          let url = '/member/collection/remove/'+productId;
         // let data={ 'productId': productId,'memberId':_this.memberId};
          _this.$http.get(url,
              // data,
              {
                  headers: {
                      'Content-Type':'application/x-www-form-urlencoded'
                  }
              }).then(function (response) {
              window.console.log(response);
              _this.$message({
                  message: response.message,
                  type: 'success'
              });
          })
      },
      //点击订购
      toBuy(product){
          product.id = product.productId;
          this.$router.push({path:'/ProductDetail',query: product})
      }
  },
};
</script>

<style lang="scss" scoped>
.my-collect {
  .title {
    text-align: left;
    height: 28px;
    font-size: 28px;
    line-height: 28px;
    color: #757575;
     font-weight: normal;
    padding: 30px 0 0 33px;
    margin-bottom:20px;
  }
  .collect-list {
    overflow: hidden;
    .collect-item {
      margin-left:10px;
      width: 245px;
      height: 395px;
      background: #fff;
      float: left;
      margin-right: 60px;
      .car-img {
        width: 245px;
        height: 245px;
      }
      .car-name {
        font-size: 18px;
        line-height: 18px;
        color: #2e2e2e;
        margin-top: 13px;
      }
      //   .car-des {
      //     font-size: 14px;
      //     line-height: 14px;
      //     color: #9e9e9e;
      //     margin-top: 8px;
      //   }
      .car-price {
        height: 16px;
        font-size: 14px;
        color: #cf2626;
        margin-top: 16px;
        .price {
          font-size: 20px;
          line-height: 20px;
        }
      }
      .btn-box {
        margin-top: 24px;
      }
    }
    .collect-item:nth-child(3n) {
      margin-right: 0;
    }
  }

  .pagination-box {
    padding: 48px 0  52px 0;
  }
  .pagination-top-line {
    width: 855px;
    height: 1px;
    margin: 0 auto;
    background: #dcdcdc;
  }
}

/*手机端*/
@media (min-width: 320px) and (max-width: 800px) {
  .my-collect {
    padding-bottom: 20px;

    .title {
      font-weight: normal;
      padding: 10px;
      margin-bottom: 0;
      font-size: 20px;
    }
  }
  .my-collect .collect-list .collect-item {
    width: 50%;
    height: 260px;
    margin: 0;
    .car-img {
      width: 100%;
      height: 140px;
    }
    .car-name {
      font-size: 14px;
    }
    .car-price {
      margin-top: 8px;
    }
    .btn-box {
      margin-top: 15px;
    }
  }
    
}
</style>